<template>
  <a-table
    :columns="columns"
    rowKey="id"
    :dataSource="data"
    bordered
    :loading="loading"
    size="small"
    :title="title"
  >
  </a-table>
</template>

<script>

  import {getAction} from '@/api/manage';
  import YchConstant from "@/api/YchConstant";
  import LocaleUtil from "../../../../utils/LocaleUtil";

  export default {
    name: "BpmStep",
    props: {
      processInstanceId: {
        type: String,
        default: null
      },
      refreshFlg: {
        type: Number,
        default: 0
      }
    },
    components: {},
    data() {
      return {
        url: {
          getData: YchConstant.PREFIX_BPM + "/bpm-front/displayRest/getStepListByInstanceId/v1"
        },
        data: [],
        loading: false,
        columns: [{
          title:this.$t('m.common.label.number'),
          dataIndex: '',
          key: 'rowIndex',
          width: 50,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        }, {
          title: this.$t('m.bpm.entity.taskName'),
          width: 180,
          dataIndex: 'stepName',
          align: "center"
        }, {
          title: this.$t('m.bpm.entity.startTimeString'),
          dataIndex: 'startTime',
          width: 130,
          align: "center"
        }, {
          title: this.$t('m.bpm.entity.endTimeString'),
          dataIndex: 'endTime',
          width: 130,
          align: "center"
        }, {
          title: this.$t('m.bpm.entity.durationString'),
          width: 120,
          dataIndex: 'duration',
          align: "center",
          customRender: function (t, r, index) {
            if(t==null){
              return ''
            }
            let timeStr;
            let d = 24*60*60*1000
            let h = 60*60*1000
            let m = 60*1000
            let s = 1000
            if(t>1000){
              let d1 = Math.floor(t/d)
              let h1 = Math.floor((t%d)/h)
              let m1 = Math.floor((t%h)/m)
              let s1 = Math.floor((t%m)/s)
              if(d1>0){
                timeStr = d1+LocaleUtil.getLocale('m.common.label.days')+h1+LocaleUtil.getLocale('m.common.label.hours')+m1+LocaleUtil.getLocale('m.common.label.minutes')+s1+LocaleUtil.getLocale('m.common.label.seconds')
              }else if(h1>0){
                timeStr = h1+LocaleUtil.getLocale('m.common.label.hours')+m1+LocaleUtil.getLocale('m.common.label.minutes')+s1+LocaleUtil.getLocale('m.common.label.seconds')
              }else if(m1>0){
                timeStr = m1+LocaleUtil.getLocale('m.common.label.minutes')+s1+LocaleUtil.getLocale('m.common.label.seconds')
              }else{
                timeStr = s1+LocaleUtil.getLocale('m.common.label.seconds')
              }
            }else{
              timeStr = t+LocaleUtil.getLocale('m.common.label.millisecond')
            }
            return timeStr
          }
        }],
        title: function () {
          return LocaleUtil.getLocale('m.bpm.design.process_flow_steps')
        }
      }
    },
    mounted() {
      this.refresh();
    },
    methods: {
      refresh() {
        if (!this.processInstanceId) {
          return;
        }
        const that = this;
        that.loading = true;
        getAction(this.url.getData, {processInstanceId: this.processInstanceId}).then((res) => {
          if (res.success) {
            that.data = res.result;
          } else {
            that.messageUtil.warning(res.message);
          }
        }).finally(() => {
          that.loading = false;
        });
      }
    },
    watch: {
      refreshFlg (value) {
        if (value > 1) {
          this.refresh()
        }
      }
    }
  }
</script>
